fix(codegen-ui-react): prevent useless props forward to custom components #1009
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Codecov Report
❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more. @@ Coverage Diff @@
## main #1009 +/- ##
===========================================
+ Coverage 81.26% 93.71% +12.45%
===========================================
Files 121 122 +1
Lines 5369 5428 +59
Branches 1599 1620 +21
===========================================
+ Hits 4363 5087 +724
+ Misses 935 323 -612
+ Partials 71 18 -53
... and 19 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
|
Hi 🖖 Any news about this PR ? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
When we create composite components (components with nested components) in Figma and they go through the studio and amplify-codegen-ui, any props are forwarded to the nested component (including the defaults that were not configured in the studio).
When using variants with logic inside the components (breakpoint, displayMode, ...), this breaks the logic because the forwarded prop will always be the default variant.
Example:
GIVEN i created a NavBar component in Figma with 2 breakpoint variants (small, medium)
GIVEN i nested my NavBar component in a PageLayout component in Figma
WHEN codegen-amplify-ui generates my PageLayout component
THEN the nested NavBar component will receive a
breakpoint="small"prop from PageLayoutTHEN the forwarded prop overrides the breakpoint value generated inside the NavBar component
Solution
Studio produced JSON includes a
configuredkey for props added via the studio, so we can use it to filter custom components props. Implemented forwarding filter rule is the following:localStateReferences)Additional Notes
I fixed most of the specs by simply adding the
configuredprop to the dataset. It seems the best way to do, but pay attention so that doesn't change the nature of the test.Links
Ticket
Other links
Verification
Manual tests
Automated tests
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.